/* 
(c) 2011 Lubomir Krupa, CC BY-ND 3.0
*/


$(document).ready(function(){

	$('#header').css({ 'top':-50 }).delay(1000).animate({'top': 0}, 800);
	

	// 设置总共有几屏
	var num = 3;
		
	// 设置每一屏的标题
	$('#name1').html("去哪吃");
	$('#name2').html("热门菜肴");
	$('#name3').html("今日团购");
	
	// 是否添加hover效果，即当鼠标移动到某一控件上时，控件的CSS属性改变
	var hoverEffect= true;
	if(hoverEffect){
		for(i=1;i<=num;i++){
			$('<style>#wrapper'+i+' div.site:hover{border: 1px #fff solid;box-shadow: 0px 0px 5px #fff;margin-left:4px;margin-top:4px;}</style>').appendTo('head');
			
		};
	};
	
	
	// 将表单的action属性值置为 search
	// $('form').attr('action',search);
	
	// 设置搜索框的css属性
	// $('#search-engine').css('background','#fff url(img/'+searchEngine+'.png)
	// center center no-repeat');
	
	// 获得窗口的宽度和高度
	var windowWidth = $(window).width();
	var windowHeight = $(window).height();
	// 计算各屏的左边距
	var left1 = Math.floor((windowWidth - 960)/2);
	var left2 = left1 - 1040;
	var left3 = left1 - 2080;
	// 计算各屏的高度
	var wrapperTop = Math.floor((windowHeight - 480)/2)-60;

	$('#place').css({'left':left1,'top':wrapperTop});
	var wrapperPos = 1;
	$('#wrapper1 input:text').focus();
	var animDone = true;
	

	// 从第一屏到第二屏
	function anim1to2(){
		// 取消输入框的焦点
		$('#wrapper1 input:text').focusout();
		// 移动尚未完成
		animDone = false;
		$('#place').animate({
			left: left2,
		},1000,'circEaseOut',function() {
			$('#wrapper2 input:text').focus();
			animDone = true;
			wrapperPos = 2;
		});
		// 一到二的按钮隐藏，就是那个向右的箭头
		$('#button1to2').hide();
		// 二到一的按钮显示，就是那个向左的箭头
		$('#button2to1').show();
		if(num>2){
			$('#button2to3').show();
			$('#button3to2').hide();
		};
	};
	
	// 从第二屏到第一屏
	function anim2to1(){
		$('#wrapper2 input:text').focusout();
		animDone = false;
		$('#place').animate({
			left: left1
		},1000,'circEaseOut',function() {
			$('#wrapper1 input:text').focus();
			animDone = true;
			wrapperPos = 1;
		});
		$('#button1to2').show();			
		$('#button2to1').hide();
		if(num>2){
			$('#button2to3').hide();
			$('#button3to2').hide();
		};		
	};
	
	// 从第二屏到第三屏
	function anim2to3(){
		$('#wrapper2 input:text').focusout();
		animDone = false;
		$('#place').animate({
			left: left3
		},1000,'circEaseOut',function() {
			$('#wrapper3 input:text').focus();
			animDone = true;
			wrapperPos = 3;
		});
		$('#button1to2').hide();
		$('#button3to2').show();
		$('#button2to1').hide();
		$('#button2to3').hide();	
	};
	
	// 从第三屏到第二屏
	function anim3to2(){
		$('#wrapper3 input:text').focusout();
		animDone = false;
		$('#place').animate({
			left: left2
		},1000,'circEaseOut',function() {
			$('#wrapper2 input:text').focus();
			animDone = true;
			wrapperPos = 2;
		});
		$('#button1to2').hide();
		$('#button3to2').hide();
		$('#button2to1').show();
		$('#button2to3').show();			
	};
	
	// 如果分屏数大于一则设置各按钮有效
	if(num>1){
		$('#button1to2').click(function(){
			anim1to2();
		});
		
		$('#button2to1').click(function(){
			anim2to1();
		});
		
		if(num>2){
			$('#button2to3').click(function(){
				anim2to3();
			});
			
			$('#button3to2').click(function(){
				anim3to2();
			});
		};
	};

   // 监听按键事件，当按下键盘上的 左右 按键时触发该事件
	$(document).bind('keydown',function(event){ 
		if(event.keyCode == '39' || event.keyCode == '37'){
			event.preventDefault();
		}
		if(event.which=='39' && animDone){
			
			if(wrapperPos==1 && num>1){
				anim1to2();
			};
			if(wrapperPos==2 && num>2){
				anim2to3();
			};
		};
		if(event.which=='37' && animDone){
			
			if(wrapperPos==3){
				anim3to2();
			};
			if(wrapperPos==2){
				anim2to1();
			};			
		};
	}); 

	// 监听鼠标滚轮时事件
	$(document).mousewheel(function(event, delta) {
		if (delta > 0 && animDone){
			if(wrapperPos==3){
				anim3to2();
			};
			if(wrapperPos==2){
				anim2to1();
			};
		}
		else if (delta < 0 && animDone){
			if(wrapperPos==1 && num>1){
				anim1to2();
			};
			if(wrapperPos==2 && num>2){
				anim2to3();
			};
		};		
		event.preventDefault();		
	});
	

	
});

